<template>
  <div>
    <div id="chart" style="width:100%;height:1200px"></div>
  </div>
</template>

<script>
import {init} from 'klinecharts'
import {getHistoryPriceByStockCode} from '@/api/eye/stockPrice'

export default {
  name: 'KLineChart',
  data() {
    return {}
  },
  mounted() {
    // 初始化图表
    const chart = init(`${'chart'}`)
    getHistoryPriceByStockCode('000001').then(res => {
      console.log(res)
      let dayDate = res.data.date
      let dayPrice = res.data.price

      let kLineData = []
      for (let i = 0; i < dayDate.length; i++) {
        let item = {}
        item.open = dayPrice[i][0]
        item.close = dayPrice[i][1]
        item.low = dayPrice[i][2]
        item.high = dayPrice[i][3]
        item.volume = dayPrice[i][4]
        item.timestamp = new Date(dayDate[i]).getTime()
        kLineData.push(item)
      }
      chart.createIndicator('MA', false, {id: 'candle_pane'})
      chart.overrideIndicator({name: 'MA', calcParams: [5, 10, 20, 30, 60, 125, 250]})
      chart.createIndicator('VOL', false, {height: 100, dragEnabled: false})
      chart.createIndicator('KDJ', false, {height: 100, dragEnabled: false})
      chart.createIndicator('MACD', false, {height: 100, dragEnabled: false})
      chart.createIndicator('BOLL', false, {height: 100, dragEnabled: false})
      chart.createIndicator('SAR', false, {height: 100, dragEnabled: false})
      chart.createIndicator('BBI', false, {height: 100, dragEnabled: false})
      chart.createIndicator('DMI', false, {height: 100, dragEnabled: false})
      chart.createIndicator('RSI', false, {height: 100, dragEnabled: false})
      chart.applyNewData(kLineData)
    })
  },
  methods: {}
}
</script>
